import React, { memo, useEffect } from 'react';
//antd相关
import { Form, Input, Button, Checkbox, Select} from 'antd';
//redux相关
import { useSelector, shallowEqual,useDispatch } from 'react-redux';
//引入路由相关
import {Redirect} from 'react-router-dom';
//导入登录处理函数
import { login } from '../../store/loginStore/actionCreators';
//引入外联样式
import './style.css';
const { Option } = Select;
export default memo(function Login() {
    //获取状态
    const user = useSelector(state => state.getIn(['user'], shallowEqual));
    const {isLogin} = user;
    //dispatch
    const dispatch = useDispatch();
    //组件相关
    const layout = {
        labelCol: {
          span: 6,
        },
        wrapperCol: {
          span: 16,
        },
      };
    const tailLayout = {
    wrapperCol: {
        offset: 4,
        span: 10,
    },
    };
    
    const [form] = Form.useForm();
    //处理表单提交
    const onFinish = (values) => {
        console.log(values);
        // console.log("四号点");
        dispatch(login(values));
        // console.log(isLogin);
      };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    //登录身份选择
    const onRoleChange = (value) => {
        switch(value){
            case '管理员':
                form.setFieldsValue({
                    role: '1'
                });
                break;
            case '学生':
                form.setFieldsValue({
                    role: '0'
                })
                break;
            default:
        }

    }
    
    useEffect(() => {
        // console.log(user);
        // console.log("一号点,此页面刷新");  
        // console.log(user);
    }, [user, dispatch,isLogin]);

    return (
        // 在这里判断是否登录，如果处于登录状态，则跳转到管理页面
        isLogin ?
        <Redirect to='/admin' />
        :
        <div className='Loginbox'>
            <Form
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            className='FrameStyle'
        >
            <Form.Item wrapperCol={{offset:4,span: 16,}} className='bottomStyle'>
                欢迎登录A大空调租赁服务系统！
            </Form.Item>
            <Form.Item
                label="账号"
                name="user_id"
                rules={[
                {
                    required: true,
                    message: '用户账号必须填写！',
                },
                ]}
            >
                <Input  placeholder='管理员：手机号，学生：学号'/>
            </Form.Item>

            <Form.Item
                label="密码"
                name="user_password"
                rules={[
                {
                    required: true,
                    message: '密码必须填写！',
                },
                ]}
            >
                <Input.Password  placeholder='请输入密码'/>
            </Form.Item>

            <Form.Item
                label="用户身份"
                name="role"
                rules={[
                {
                    required: true,
                    message: '用户身份必须填写！',
                },
                ]}
            >
                <Select
                    placeholder="请选择你的登录身份"
                    onChange={onRoleChange}
                    allowClear
                >
                    <Option value="1">管理员</Option>
                    <Option value="0">学生</Option>
                </Select>
            </Form.Item>

            <Form.Item wrapperCol={{offset: 16,span: 10,}}>
                <Button type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
            
        </Form>
        </div>
    )
})
